<template>
    <div id="phonelogin">
        <form @submit.prevent="submit" id="form">
        <div>
             <label class="fa fa-phone"></label>
             <input type="number" placeholder="请输入手机号" v-model="phone" id="input1">
        </div>
        <div class="ccap">
            <label class="fa fa-envelope-o"></label>
            <input type="text" placeholder="请获取手机验证码" id="input2" v-model="msg" >
            <p id="msg" @click="msgClick">获取手机验证码</p>
        </div>
        <div class="ccap">
            <label class="fa fa-file-o"></label>
            <input type="text" placeholder="请输入正确的验证码" id="input3" v-model="captcha">
            <img src="/api/users/captcha" id="cap" @click="refreshCaptcha" >
        </div>
        <div>
            <button>验证并登录</button>
        </div>
        </form>
    </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex';
export default {
    data(){
        return{
            phone:"",
            msg:"",
            captcha:""
        }
    },
    methods:{
        ...mapActions({
            submit:"loginSubmit"
        }),
        refreshCaptcha(){
             $("#cap").attr("src","");
             $("#cap").attr("src","/api/users/captcha?"+Math.random());
        },
        msgClick(){
            if($("#input1").val()!=""){
                // var sourceStr = "1234567890";
                // var msg = "";
                // for(var i = 0;i<6;i++){
                //     var index = Math.floor(Math.random()*sourceStr.length);
                //     var n= sourceStr[index];
                //     msg+=n;
                // }
                this.msg=668099;
            }else{
                layer.msg("请完善信息");
            }
        },
        submit(){
            if($("#input1").val()==""||$("#input2").val()==""||$("#input3").val()==""){
                 layer.msg("请完善信息");
            }else{
                var param={
                    account:this.phone,
                    psw:this.msg,
                    captcha:this.captcha
                }
                this.http.post("/api/users/login",param)
                .then(res=>{
                    layer.msg(res.data.msg);
                });
                
            }
        },

    },
    computed:{
        ...mapState({
            loginForm:state=>state.user.loginForm,
        }),
    }
}
</script>

<style scoped>
#phonelogin{
    width:100%;
    text-align: center;
    z-index:-10;
}
#phonelogin div{
    background-color: white;
}
label{
    font-size: 22px;
}
input{
    border: none;
    border-bottom: 1px solid #dddddd;
    width:90%;
    height:50px;
}
button{
    width:90%;
    height: 40px;
    background-color: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 4px;
    margin-top: 20px;
}

#input2{
    width:48%;
}

#input3{
    width:48%;
    margin-left:1px;
}
img{
    position:relative;
    top:10px;
    cursor:pointer;
     width:40%;
}

#msg{
    display: inline-block;
    width:40%;
    height: 40px;
    background-color: cyan;
    position: relative;
    top:3px;
    text-align: center;
    line-height: 40px;

}
</style>